<template>
  <div class="background-gray" id="shoppingCar">
    <magic-header titleName="购物车" :returnNative="$route.params.native"> 
      <div slot="title-right">
        <a  @click="edit" class="right finish" v-if="queryData.length > 0 && !isEdit">
          编辑
        </a>
        <a  @click="edit" v-if="isEdit" class="right finish">
          完成
        </a>
      </div>
    </magic-header>
    <empty v-if="queryData.length === 0 && resData" message="您的购物车空空如也"></empty>
    <div v-else>
      <shoppingcar-edit ref="shopCarEdit" v-if="isEdit" :value="queryData" v-on:DeleteCartItem="reGet" v-on:update="reGet"></shoppingcar-edit>

      <div v-else class="box">
        <scroll>
          <template v-for="cart in queryData" >
            <mu-divider shallowInset/>
            <div layout="row" layout-align="flex-start center" class="shop-content">
              <mu-checkbox slot="chose" v-model="cart.isShopSelected" class="checkbox"/>
              <img :src="cart.shop.logo?addPath(cart.shop.logo):favicon" alt="" width="20" height="20">
              <p>{{cart.shop.name}}</p>
              <!-- <i class="mu-icon material-icons">keyboard_arrow_right</i> -->
              <p flex align-self="flex-end" class="text-right" v-if="cart.hasCoupons==='1'?true:false" @click="getCoupon(cart.shop)">领券</p>
            </div>
            <mu-divider shallowInset/>
            <panel v-for="(item,index) in cart.cartItems" 
                   :isValid="item.isValid==='0'" 
                   :key="index" 
                   :value="item.product" 
                   :link="true" 
                   v-if="!item.packageItems"
                   :service="item.product&&item.product.categoryType==='2'?true:false">
              <!-- 因 mu-checkbox 的 nativeValue 值不能为对象 用 JSON.stringify 转成字符串 在使用的时候转换回来-->
              <mu-checkbox slot="chose" :disabled="item.isValid==='1'?false:true" v-if="item.product&&item.product.categoryType!=='2'&&item.isValid==='1'" v-model="isSelected" name="group" :nativeValue="JSON.stringify(item)" class="checkbox"/>
              <mu-checkbox slot="chose" :disabled="item.isValid==='1'?false:true" v-if="item.product&&item.product.categoryType==='2'&&item.isValid==='1'" v-model="isServiceSelected" name="group" :nativeValue="JSON.stringify(item)" class="checkbox"/>
              <p slot="chose" v-if="item.isValid==='0'" class="validTag">无效</p>
              <div slot="desc" class='desc'>
                <span v-for="(desc,i) in item.producPromotions" 
                      v-if="desc.type =='4'||desc.type=='7'"
                      :key="i">
                      {{desc.type ==='4'?'限时折扣':'会员价'}}</span>
              </div>
              <div slot="service" class="text-right">
                可预约
              </div>
              <price slot="price" :value="item.effectivePrice">
                <del slot="origin" v-if="item.producPromotions && item.producPromotions.length !== 0" class="originPrice">￥{{item.product && item.product.price || '30'}}</del>
              </price>
              <div slot="number" class="text-right">
                X{{item.quantity}}
              </div>
            </panel>
              <match class="match" v-else>
                <mu-checkbox slot="chose" :disabled="item.isValid==='1'?false:true"  v-model="isSelected" name="group" :nativeValue="JSON.stringify(item)" class="checkbox"/>
                <mu-checkbox slot="chose" :disabled="item.isValid==='1'?false:true" v-if="item.product&&item.product.categoryType==='2'&&item.isValid==='1'" v-model="isServiceSelected" name="group" :nativeValue="JSON.stringify(item)" class="checkbox"/>
                <panel slot="content" class="content" v-for="matchItem in item.packageItems" 
                      :isValid="item.isValid==='0'" 
                      :key="matchItem"
                      :link='true'
                      :value="matchItem.product"
                      :service="item.product&&item.product.categoryType==='2'?true:false">
                 <p slot="chose" v-if="item.isValid==='0'" class="validTag">无效</p>
                  <div slot="desc" class='desc'>
                  </div>
                  <div slot="service" class="text-right">
                    可预约
                  </div>
                  <price slot="price" :value="matchItem.effectivePrice">
                    <del slot="origin" v-if="item.producPromotions && item.producPromotions.length !== 0" class="originPrice">￥{{item.product && item.product.price || '30'}}</del>
                  </price>
                  <div slot="number" class="text-right">
                    X{{item.quantity}}
                  </div>
                </panel>
                  <div slot="information" class="information ">
                     <span class="price">套餐价：{{item.effectivePrice}}</span> 
                     <span class="number">X{{item.quantity}}</span>
                  </div>
              </match>
          </template>
        </scroll>
        <foot class="text-right">
          <mu-checkbox label="全选" name="group" v-model="isSelectAll" class="checkbox"  />
          <a class="primary-button" v-tap="{methods: orderConfirm}">结算({{isSelected.length+isServiceSelected.length}})</a>
          <a class="primary-button secondly" v-tap="{methods: orderServiceConfirm}">预约({{isServiceSelected.length}})</a>
          <a class="sum">
            合计:<span>¥{{priceAll}}</span>
            <p>(含运费: 包邮)</p>
          </a>
        </foot>
      </div>
    </div>
    <coupon :bottomSheet="bottomSheet" @close="couponClose" :shopId="selectedGoodsShopId" :shopName="selectedGoodsShopName" v-if="selectedGoodsShopId"></coupon>
  </div>
</template>

<script>
  /* eslint-disable */
  import Vue from 'vue'
  import shoppingcarEdit from './asc_cartEdit'
  import panel from 'components/panel'
  import icarHeader from 'components/my-header'
  import icarCheckbox from 'components/icar-checkbox'
  import left from 'assets/left-gray.svg'
  import editIcon from 'assets/edit.svg'
  import price from 'components/price'
  import match from 'components/match'
  import origin from 'components/origin'
  import foot from 'components/foot'
  import icarButton from 'components/order-button'
  import number from 'components/number'
  import defaultEmpty from 'assets/default_empty_icon.png'
  import empty from 'components/empty-page.vue'
  import scroll from 'components/scroll'
  import favicon from 'assets/default_user_icon.png'
  import coupon from "../payment/p_coupon.vue";
  import magicHeader from 'components/magicHeader'
  // service
  import QueryCartWithPromotionService from "services/shoppingCart/QueryCartWithPromotion";
  import UpdateCartItemService from "services/shoppingCart/UpdateCartItem";
  // vuex
  import appointStore from "services/appointment/appoint";

  // let _cacheQueryDataForEdit = null

  // function getShopCar () {
    
  // }
  export default {
    name: 'asc_shoppingCart',

    components: {
      magicHeader,
      coupon,
      scroll,
      shoppingcarEdit,
      panel,
      icarHeader,
      icarCheckbox,
      price,
      origin,
      foot,
      icarButton,
      number,
      empty,
      match
    },
    data () {
      return {
        cacheQueryDataForEdit: [],
        defaultEmpty,
        left,
        editIcon,
        isEdit: false,
        queryData: [],
        isSelected: [],
        isServiceSelected: [],
        favicon,
        bottomSheet : false,
        selectedGoodsShopId : '',
        selectedGoodsShopName : '',
        isSelectAll : false,
        resData:false
      }
    },
    watch:{
      queryData:{
        deep:true,
        immediate:true,
        handler:function (newValue,oldValue) {
            this.queryData.map((cart)=>{
              if(cart.isShopSelected){
                cart.cartItems.map((item)=>{
                    if(item.isValid==='1'){
                      if(item.product&&item.product.categoryType==='2'){
                          item = JSON.stringify(item)
                        if (this.isServiceSelected.indexOf(item) < 0) {
                          this.isServiceSelected.push(item)
                        }
                      }else{
                          item = JSON.stringify(item)
                        if (this.isSelected.indexOf(item) < 0) {
                          this.isSelected.push(item)
                        }
                      }
                    }
                });
              }else{
                cart.cartItems.map((item)=>{
                  if(item.product&&item.product.categoryType==='2'){
                    item = JSON.stringify(item)
                    if (this.isServiceSelected.indexOf(item) > -1) {
                      this.isServiceSelected.splice(this.isServiceSelected.indexOf(item),1)
                    }
                  }else{
                    item = JSON.stringify(item)
                    if (this.isSelected.indexOf(item) > -1) {
                      this.isSelected.splice(this.isSelected.indexOf(item),1)
                    }
                  }

                });
              }
            });
          
        }
      },
      isSelectAll:{
        deep:true,
        immediate:true,
        handler:function (newValue,oldValue) {
            if (newValue) {
              this.queryData.map((cart)=>{
                cart.isShopSelected = true;
                cart.cartItems.forEach(val => {
                  // val = JSON.stringify(val)
                  if(val.isValid==='1'){
                    if(val.product&&val.product.categoryType==='2'){
                      if (this.isServiceSelected.indexOf(val) < 0) {
                        val = JSON.stringify(val)
                        this.isServiceSelected.push(val)
                      }
                    }else{
                      if (this.isSelected.indexOf(val) < 0) {
                        val = JSON.stringify(val)
                        this.isSelected.push(val)
                      }
                    }
                  }
                })
              });
            } else {
              this.queryData.map((cart)=>{
                cart.isShopSelected = false;
              });
              this.isSelected = []
              this.isServiceSelected = []
            }
          
        }
      }
    },
    computed: {
      priceAll () {
        let _price = 0
        this.isSelected.forEach(val => {
          val = JSON.parse(val)
          _price = _price + val.quantity * (val.product?val.product.price : val.effectivePrice)
        })
        this.isServiceSelected.forEach(val => {
           val = JSON.parse(val)
          _price = _price + val.quantity * (val.product?val.product.price : val.effectivePrice)
        })
        return Number(_price).toFixed(2)
      },
      hasExit () {
        // this.isSelected
        let _selected = this.isSelected
        if (this.queryData) {
          return this.queryData.indexOf(_selected) > -1
        } else {
          return false
        }
      }
    },
    created(){
      this.getShopCar().then(resp => {
          this.queryData = resp.carts.map((cart)=>{
            cart.isShopSelected = false;
            return cart;
          });
          this.resData = true
        })
    },
    methods: {
      getShopCar(){
        let vm = this
        return new Promise(function(resolve){
          QueryCartWithPromotionService.bind(vm)({}, resp => {
            resp.carts.forEach(val => {
              // let desc = ''
              let child = val.cartItems 
              child.length > 0 && child.forEach(type => {
                // desc = desc + type.specificationData.name + ':' + type.name + ' '
              })
              // val.desc = desc
            })
            resolve(resp)
          })
        })
      },
      test () {
        this.$router.push({
          name: 'orderManage'
        })
      },
      goDetail (params) {
        if (params.item&&params.item.categoryType === '1') {
          this.$router.push({name: 'sg_goods', params: {id: params.item.product.id, name: '1'}})
        } else {
          this.$router.push({name: 'sg_goods_car', params: {id: params.item.product.id, name: '1'}})
        }
      },
      isMultiShop(cartItems){
        console.log(JSON.parse(cartItems[0]))
        let _cartItems =JSON.parse(cartItems[0])
        let shopidFlag = _cartItems.product&&_cartItems.product.shopId ||(_cartItems.packageItems&&_cartItems.packageItems[0].product.shopId) ;
        let result = false;
        cartItems.map((item)=>{
            item = JSON.parse(item)
            if(shopidFlag!==((item.product&&item.product.shopId) || (_cartItems.packageItems&&_cartItems.packageItems[0].product.shopId) )){
              result = true;
            }
        })
        console.log(result)
        return result;
      },
      orderConfirm () {
        let allSelected = this.isSelected.concat( this.isServiceSelected)
        if (allSelected.length === 0) {
          this.$.toast('您还没有选择商品哦')
          return
        } else {
            if(this.isMultiShop(allSelected)){
              this.$.toast('不允许多个店铺一起结算！')
            }else{
              let newAllSelected = []
              allSelected.forEach(item =>{
                let _item = JSON.parse(item)
                if(!!_item.packageItems){
                  _item.packageItems.forEach(val=>{
                    newAllSelected.push(val)
                  })
                }else{
                  newAllSelected.push(_item)
                }
                
              })
              console.log(newAllSelected)
              this.$router.push({name: 'o_orderConfirm', query: {cartItems: JSON.stringify(newAllSelected)}})
            }
        }
      },
      orderServiceConfirm () {
        if (this.isServiceSelected.length === 0) {
          this.$.toast('您还没有选择预约商品哦')
          return
        } else {
            if(this.isMultiShop(this.isServiceSelected)){
              this.$.toast('不允许多个店铺一起预约！')
            }else{
              let cartItems = []
              let flgItem = [];
              let allSelected = this.isSelected.concat( this.isServiceSelected)
              allSelected.map((item)=>{
                  item = JSON.parse(item)
                  console.log(item)
                  if(item.product.isBuyAtShop==='0'||item.product&&item.product.categoryType !== '2'){
                    flgItem.push(item);
                  }
              })
              if(flgItem&&flgItem.length>0){
                let notsupport = ''
                flgItem.map((item)=>{
                  notsupport += item.product.name + ','
                })
                this.$.toast('部分商品不支持预约：' + notsupport.substring(0,notsupport.length-1))
              }else{
                let _ServiceSelected = []
                this.isServiceSelected.forEach(val =>{
                  _ServiceSelected.push(JSON.parse(val))
                })
                console.log(_ServiceSelected)
                // 原生改为H5
                // this.$.push('router_makeAppointmentOrder', {
                //   type:'0',
                //   cartItems: _ServiceSelected
                // })
                appointStore.commit("setServices", {
                  cartItems: _ServiceSelected
                });
                this.$router.push({
                  name: "appoint_native",
                  params: {
                    is: "protect"
                  }
                })
              }
            }
        }
      },
      edit () {
        let childEdit = this.$refs.shopCarEdit
        let numberResults = []
        if (childEdit) {
          let numbers = childEdit.$refs.number
          if (Array.isArray(numbers)) {
            numbers.forEach(val => {
              numberResults.push(val.test())
            })
          }
          if (numberResults.indexOf(undefined) > -1) {
            return
          }
        }
        this.isSelected = []
        this.isServiceSelected = []
        this.isEdit = !this.isEdit
        if (!this.isEdit) {
          this.submit()
        }
      },
      reGet () {
        this.getShopCar().then(resp => {
          this.queryData = resp.carts.map((cart)=>{
            cart.isShopSelected = false;
            return cart;
          });
        })
      },
      diff () {
        // this.cacheQueryDataForEdit.forEach(val => {
        //   if
        // })
        let queryDataHasChange = []
        this.queryData.map((cart)=>{
          cart.cartItems.forEach(val => {
            this.cacheQueryDataForEdit.forEach(value => {
              if (val.id === value.id) {
                if (val.quantity != value.quantity) {
                  queryDataHasChange.push(val)
                }
              }
            })
          })
        });

        return queryDataHasChange
      },
      submit (val) {
        if (this.queryData.length === 0) {
          return
        }
        // let _value = this.diff()
        // if (_value.length === 0) {
        //   return
        // }
        let cartItems = [];
        this.queryData.map((cart)=>{
          cart.cartItems.forEach(val => {
            if(val.product){
               val.product = {
                id:val.product.id
              }
            }else{
              val.packageItems.forEach(value=>{
                value.quantity = val.quantity
                value.product = {
                  id:value.product.id
                }
                cartItems.push(value)
              })
            }
           
          })
          cart.cartItems.map((item)=>{
            if(!item.product){
              console.log(item)
              return
            }
            cartItems.push(item);
          })
        });
        let req = {
          methodName: 'UpdateCartItem',
          cartItems: cartItems
        }
        UpdateCartItemService.bind(this)(req, resp => {
          this.getShopCar().then(resp => {
            this.cacheQueryDataForEdit = []
            this.queryData = resp.carts.map((cart)=>{
              cart.isShopSelected = false;
              return cart;
            });
          })
        })
      },
      checkIfExit (value) {
        if (this.queryData) {
          return this.queryData.indexOf(value) > -1
        } else {
          return false
        }
      },
      getCoupon(shop){
        this.selectedGoodsShopId = shop.id;
        this.selectedGoodsShopName = shop.name;
        this.bottomSheet = true;
      },
      couponClose(){
        this.bottomSheet = false;
      }
    },
    // beforeRouteEnter (to, from, next) {
    //   this.getShopCar().then(resp => {
    //     next(vm => {
    //       vm.queryData = resp.data.carts.map((cart)=>{
    //         cart.isShopSelected = false;
    //         return cart;
    //       });
    //     })
    //   })
    // }
  }
</script>

<style>
  #shoppingCar{
    height: 100%;
  }

  #shoppingCar .box{
    margin-bottom: 40px;
  }
  #shoppingCar .bottom {
    margin-bottom: 40px;
  }
/* 
  #shoppingCar .result_empty{
    margin-top: -50px;
  } */

  #shoppingCar .panorama_fish_eye{
    color: #939393;
    font-size: 40px;
  }

  #shoppingCar .mu-checkbox-icon-uncheck{
    color: #939393;
  }

  #shoppingCar .check_circle{
    color: #548CD1;
  }

  #shoppingCar i {
    font-size: 25px !important;
  }

  #shoppingCar .desc{
    color:rgb(216, 71, 71);
    margin-bottom: 9px;
  }
  #shoppingCar .desc span{
    border: 1px solid #999;
    padding: 1px 3px;
    border-radius: 5px;
    margin-right: 9px;
  }

  #shoppingCar .sum{
    color: #7D7D7D;
    font-size: 1rem;
    line-height: 16px;
    margin-right: 15px;
    float: right;
    margin-top: 6px;
  }

  #shoppingCar .sum span{
    color: #E2441D;
  }

  #shoppingCar .sum p{
    font-size: 1rem;
  }


  #shoppingCar .right {
    color: #F98B0F;
    font-size: 1.2rem;
    position: relative;
    right: 10px;
  }

  #shoppingCar .foot{
    height: 44px;
  }

  #shoppingCar .foot .checkbox{
    margin-top: 8px;
    font-size: 14px;
    position: relative;
    left: 6px;
  }

  #shoppingCar .checkbox{
    display: inline;
    margin-left: 10px;
    float: left;
    margin-right: 6px;
  }

  #shoppingCar .primary-button{
    margin-top: 2px;
    float: right;
    background-color: #F98700;
    text-align-last: center;
    height: 32px;
    line-height: 32px;
    margin-top: 6px;
    margin-bottom: 6px;
    margin-right: 1%;
    font-size:16px;
    width: 65px;
  }

  #shoppingCar .secondly{
    border: 1px solid #f98700;
    background-color: #fff;
    color: #f98700;
    width: 65px;
  }

  #shoppingCar .text-right{
    margin-right: 10px;
    color: #969696;
    /*margin-top: 2px;*/
  }
  #shoppingCar .shop-content{
    padding: 10px;
  }
  #shoppingCar .shop-content p{
    margin-left: 10px;
    line-height: 25px;
  }
  #shoppingCar .shop-content img{
    margin-left: 10px;
    line-height: 25px;
  }
  #shoppingCar .shop-content .checkbox{
    position: relative;
    left: -4px;
  }
  #shoppingCar .validTag{
    width: 31px;
    text-align: center;
    margin-left: 6px;
    background: #eee;
    border-radius: 10px;
    height: 20px;
    line-height: 20px;
    font-size: 9px;
    float: left;
    margin-right: 3px;
/*     display: inline;
margin-left: 10px;
float: left;
margin-right: 6px; */
  }
  #shoppingCar .originPrice{
    font-size:14px;
    color:#939393;
  }
  #shoppingCar .match .content{
    margin-left:34px;
  }
  #shoppingCar .match .information{
  padding: 10px 10px 10px 50px;
  border-bottom: none;
}
  #shoppingCar .match .information .price {
  font-size:14px;
  line-height: 20px;
}
#shoppingCar .match .information .number{
  font-size: 12px;
  line-height: 16px;
  float: right;
  color: #969696;
}

#shoppingCar .match{
  border-bottom: 1px solid #bdbdbd;
  padding-left:6px;
}

#shoppingCar .match .checkbox{
    margin-right: -2px;
    z-index: 1;
    top: 7px;
  }
  #shoppingCar .mu-divider.shallow-inset{
    margin: 0;
    background-color: #bdbdbd;
  }
 #shoppingCar #panel:after{
    border-bottom: 1px solid #5f5f5f;
  }
#shoppingCar .match  #panel:after{
    left: 17px;
    /* border-bottom: 1px solid #5f5f5f; */
  }
</style>
